<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 定义模板 -->
    <div id="app">
      <!-- 使用过滤器  |(管道符) -->
      <div>{{date | format | onlyDate}}</div>
      <div>{{date | format('YYYY年MM月DD日 HH:mm:ss',1) | onlyTime}}</div>
      <div>{{date | format('YYYY/MM/DD HH:mm:ss')}}</div>
      <!-- 如果要在标签的属性上使用过滤器,只能和v-bind配合使用. -->
      <!-- <input type="text" :value="date | format" /> -->
    </div>

    <div id="root">
      <div>{{date | format}}</div>
    </div>

    <!-- <div id="wrap">
      <div>{{date | format}}</div>
    </div> -->

    <!-- 引入vue.js -->
    <script src="./vue.js"></script>
    <script src="./dayjs.min.js"></script>

    <!-- 创建vue实例,绑定模板 -->
    <script>
      // 定义全局过滤器. 全局过滤器在任何模板中都可以使用
      Vue.filter(
        'format',
        function (value, str = 'YYYY-MM-DD HH:mm:ss', ...args) {
          // value是过滤器之前的数据
          // str是额外传入的数据
          // console.log(value, str, args)
          // 注意: 过滤器不会修改数据,而是根据数据计算出来一个新的值
          // 注意: 过滤器中的this不是当前组件实例,而是window
          return dayjs(value).format(str)
        }
      )
      const vm = new Vue({
        el: '#app',
        data: {
          date: Date.now(),
        },
        // 定义过滤器
        // 这种写法是局部过滤器.只能在当前vue实例所绑定的模板中使用
        filters: {
          onlyDate(value) {
            return value.split(' ')[0]
          },
          onlyTime(value) {
            return value.split(' ')[1]
          },
        },
      })

      const vmRoot = new Vue({
        el: '#root',
        data: {
          date: 1688799999999,
        },
      })
    </script>
  </body>
</html>
